<script setup>
import { ref, onMounted } from 'vue'
import { getWeatherData } from '@/api/weather.js'
import { weatherIcons } from '@/utils/weatherIcons.js'

const weather = ref(null)

// 获取图标函数
const getIcon = (desc) => weatherIcons[desc] || "🌍"

// 根据温度返回颜色
const getTempColor = (temp) => {
  const t = Number(temp);
  if (t <= 0) return '#00bfff';       // 蓝色-寒冷
  if (t > 0 && t <= 15) return '#1e90ff';  // 浅蓝-凉爽
  if (t > 15 && t <= 25) return '#32cd32'; // 绿色-适中
  if (t > 25 && t <= 30) return '#ffa500'; // 橙色-温暖
  return '#ff4500';                    // 红色-炎热
}

onMounted(async () => {
  const res = await getWeatherData()
  weather.value = res.data
})
</script>

<template>
  <transition name="fade-slide">
    <div class="weather-container" v-if="weather">
      <div class="weather-item">
        <span class="value">🧭{{ weather.province }}省 广州市 {{ weather.city }}</span>
      </div>
      <div class="weather-item">
        <span class="label">天气:</span>
        <span class="value weather-value">
          {{ weather.weather }} {{ getIcon(weather.weather) }}
        </span>
      </div>
      <div class="weather-item temperature">
        <span class="label">气温:</span>
        <span
            class="value temperature-value"
            :style="{ color: getTempColor(weather.temperature) }"
        >{{ weather.temperature }}℃</span>
      </div>

      <div class="weather-item">
        <span class="label">风向:</span>
        <span class="value">{{ weather.winddirection }}</span>
      </div>
      <div class="weather-item">
        <span class="label">风力:</span>
        <span class="value">{{ weather.windpower }}</span>
      </div>
      <div class="weather-item">
        <span class="label">湿度:</span>
        <span class="value">{{ weather.humidity }}%</span>
      </div>
      <div class="weather-item">
        <span class="label">发布时间:</span>
        <span class="value">{{ weather.reporttime }}</span>
      </div>
    </div>
  </transition>
</template>

<style scoped>
/* 容器 */
.weather-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;              /* 每个天气项间隔 */
  background: #f8fafc;    /* 浅背景 */
  padding: 16px 24px;
  margin-bottom: 10px;
  border-radius: 12px;
  font-size: 14px;
  color: #333;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* 每个天气项 */
.weather-item {
  display: flex;
  align-items: center;
  gap: 6px;               /* 标题和内容间距 */
  white-space: nowrap;
  min-width: 140px;        /* 保证不压缩内容 */
  transition: transform 0.2s ease, color 0.2s ease;
}
.weather-item:hover {
  transform: translateY(-2px) scale(1.03);
}

/* 标题和内容区分 */
.label {
  color: #666;           /* 标题灰色 */
  font-size: 13px;
  width: 60px;           /* 固定宽度 */
  text-align: right;     /* 右对齐 */
  flex-shrink: 0;        /* 不压缩 */
}
.value {
  color: #222;           /* 内容深色 */
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;              /* 图标和文字间距 */
}

/* 天气图标和文字样式 */
.weather-value {
  color: #0077ff;         /* 蓝色显示天气 */
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(0, 119, 255, 0.1);
}
.weather-value span {
  display: inline-block;
  animation: iconShake 3s infinite;
}

/* 呼吸动画 */
@keyframes tempBreathing {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

/* 图标轻微摇动 */
@keyframes iconShake {
  0%,100% { transform: rotate(0deg); }
  25% { transform: rotate(10deg); }
  50% { transform: rotate(-10deg); }
  75% { transform: rotate(5deg); }
}

/* 进入动画 */
.fade-slide-enter-active {
  animation: fadeSlideIn 0.8s ease;
}
@keyframes fadeSlideIn {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
</style>
